<template>
  <!------------------------------------ 地址四级联动选择组件 ------------------------------------
    @desc 地址四级联动
    @author kyle
    @date 2021-03-015
    @props
      addressData   ———— 地址数据
    @method
      pickArea      ———— 选择完毕
  -->
  <div class="area-content">
    <div class="">
      <div class="fw-b fs-30">请选择所在地区</div>
      <div class="flex-v-c mt-70 area-selected color-gray-light">
        <span v-if="maxLevel>=0" class="area-selected-item text-show-line-1" :class="{'active-style':activeIndex===0,'selected-style':areaData.ProvinceName}" @click="show(0)">{{ areaData.ProvinceName||"省" }}</span>
        <span v-if="maxLevel>=1" class="area-selected-item text-show-line-1" :class="{'active-style':activeIndex===1,'selected-style':areaData.CityName}" @click="show(1)">{{ areaData.CityName||"市" }}</span>
        <span v-if="maxLevel>=2" class="area-selected-item text-show-line-1" :class="{'active-style':activeIndex===2,'selected-style':areaData.AreaName}" @click="show(2)">{{ areaData.AreaName||"区/县" }}</span>
        <span v-if="maxLevel>=3" class="area-selected-item text-show-line-1" :class="{'active-style':activeIndex===3,'selected-style':areaData.StreetName}" @click="show(3)">{{ areaData.StreetName||"街道/镇" }}</span>
      </div>
    </div>
    <div class="mt-80 fs-28 lh-76 area-list">
      <ul v-show="showLevel===0">
        <li v-for="(item,index) in provinceList" :key="index" :class="{'active-item':areaData.ProvinceName===item.Name}" @click="pick(item,0)">
          {{ item.Name }}
        </li>
      </ul>
      <ul v-show="showLevel===1">
        <li v-for="(item,index) in cityList" :key="index" :class="{'active-item':areaData.CityName===item.Name}" @click="pick(item,1)">
          {{ item.Name }}
        </li>
      </ul>
      <ul v-show="showLevel===2">
        <li v-for="(item,index) in areaList" :key="index" :class="{'active-item':areaData.AreaName===item.Name}" @click="pick(item,2)">
          {{ item.Name }}
        </li>
      </ul>
      <ul v-show="showLevel===3">
        <li v-for="(item,index) in streetList" :key="index" :class="{'active-item':areaData.StreetName===item.Name}" @click="pick(item,3)">
          {{ item.Name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { GetCountrywideListBySelRegion } from 'api/member'
export default {
  name: 'AreaSelect',
  components: {

  },
  props: {
    addressData: { // 地址数据
      type: Object,
      required: false,
      default: function() {
        return {}
      }
    },
    maxLevel: { // 层级
      type: Number,
      required: false,
      default: 3
    }

  },
  data() {
    return {
      provinceList: [],
      cityList: [],
      areaList: [],
      streetList: [],
      showLevel: 0, // 当前显示的区域列表
      activeIndex: 0, // 当前在选的区域
      maxActiveIndex: 0, // 可切换最大index
      areaData: {} // 当前选择的区域数据
    }
  },
  computed: {

  },
  watch: {
    addressData(newVal, oldVal) {
      this.init(newVal)
    }
  },

  created() {
    this.init(this.addressData)
  },
  methods: {
    init(data) {
      this.areaData = JSON.parse(JSON.stringify(data))
      const _this = this
      this.GetCountrywideListBySelRegion(0, -1, function() {
        _this.levelPlus(-1)
        _this.getCityList()
      })
    },
    getCityList() {
      const _this = this
      if (_this.areaData.ProvinceId) {
        _this.GetCountrywideListBySelRegion(_this.areaData.ProvinceId, 0, function() {
          _this.levelPlus(0)
          _this.getAreaList()
        })
      }
    },
    getAreaList() {
      const _this = this
      if (_this.areaData.CityId) {
        _this.GetCountrywideListBySelRegion(_this.areaData.CityId, 1, function() {
          _this.levelPlus(1)
          _this.getStreetList()
        })
      }
    },
    getStreetList() {
      const _this = this
      if (_this.areaData.AreaId) {
        _this.GetCountrywideListBySelRegion(_this.areaData.AreaId, 2, function() {
          _this.levelPlus(2)
        })
      }
    },
    show(level) {
      if (this.maxActiveIndex >= level) {
        this.activeIndex = level
        this.showLevel = level
      }
    },

    // 地址选择
    pick(item, level) {
      const oldData = JSON.parse(JSON.stringify(this.areaData))
      this.areaData = {}
      switch (level) {
        case 0:
          this.areaData.ProvinceName = item.Name
          this.areaData.ProvinceId = item.ID
          break
        case 1:
          this.areaData.ProvinceName = oldData.ProvinceName
          this.areaData.ProvinceId = oldData.ProvinceId
          this.areaData.CityName = item.Name
          this.areaData.CityId = item.ID
          break
        case 2:
          this.areaData.ProvinceName = oldData.ProvinceName
          this.areaData.ProvinceId = oldData.ProvinceId
          this.areaData.CityName = oldData.CityName
          this.areaData.CityId = oldData.CityId
          this.areaData.AreaName = item.Name
          this.areaData.AreaId = item.ID
          break
        case 3:
          this.areaData = oldData
          this.areaData.StreetName = item.Name
          this.areaData.StreetId = item.ID
          break
      }
      if (level === this.maxLevel) {
        this.$emit('pickArea', this.areaData)
      } else {
        this.GetCountrywideListBySelRegion(item.ID, level, this.levelPlus(level))
      }
    },

    levelPlus(level) {
      if (level + 1 <= this.maxLevel) {
        this.showLevel = level + 1
        this.activeIndex = level + 1
        this.maxActiveIndex = level + 1
      }
    },

    // 获取地区列表
    GetCountrywideListBySelRegion(id, level, func) {
      GetCountrywideListBySelRegion({ parentId: id }).then(res => {
        if (res) {
          switch (level) {
            case -1:
              this.provinceList = res.Data
              break
            case 0:
              this.cityList = res.Data
              break
            case 1:
              this.areaList = res.Data
              break
            case 2:
              this.streetList = res.Data
              break
          }
          if (res.Data && res.Data.length <= 0) {
            this.$emit('pickArea', this.areaData)
          }
          if (typeof (func) === 'function') {
            func(level)
          }
        }
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.area-content{
  background: $colorF;
  border-radius: 40px 40px 0 0;
  height:75vh;
  padding: 42px;
  position: relative;
  .area-selected{
    width:100%;
    position: relative;
    display: flex;
    justify-content: space-between;
    justify-items: center;
    position: relative;
    &:after{
      content: "";
      position: absolute;
      top: 4px;
      left:calc(12.5% - 7.5px);
      width: calc(75% + 15px);
      height: 2px;
      @include bg-primary;
    }
    .area-selected-item:not(:last-child){
      margin-right:20px;
    }
    span{
      width: calc(25% - 15px);
      font-size: 28px;
      line-height: 80px;
      text-align: center;
      position: relative;
      &:before{
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        top: 0;
        left: calc(50% - 6px);
        background: $colorF;
        @include color-primary;
        border-radius: 100%;
        z-index: 1;
        border: 2px solid currentColor;
      }
      &.active-style{
        color:$color9;
        position: relative;
        &:after{
          content: "";
          position: absolute;
          @include color-primary;
          width:46px;
          height: 4px;
          border-radius: 2px;
          background: currentColor;
          bottom: 2px;
          left:calc(50% - 23px);
        }
      }
      &.selected-style{
        color:$color3;
        &:before{
          @include bg-primary;
        }
      }
    }
  }
  .area-list{
    height: calc(100% - 280px);
    overflow-y: scroll;
  }
  .active-item{
    position: relative;
    @include color-primary;
    padding-left: 50px;
    &:before{
      content: '';
      position: absolute;
      width: 10px;
      height: 20px;
      left: 5px;
      top: 15px;
      border: 4px solid;
      border-color: transparent currentColor currentColor transparent;
      transform: rotate(45deg);
    }
  }
}
</style>

